<template>
  <div class="page-container blog-list-container">
    <el-table v-loading="loading" border style="width: 100%" :data="blogRes.data.rows">
      <el-table-column label="序号" prop="date" width="180" align="center">
        <template #default="scope">
          {{ (pageQuery.page!-1)*pageQuery.limit! +scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="文章名称" prop="title" width="180" align="center">
        <template #default="scope">
          <el-popover title="博客预览图" placement="bottom" :width="230" trigger="hover">
            <el-image style="width: 150px" :src="scope.row.thumb" fit="fill"></el-image>
            <template #reference>
              <a
                @click.prevent="toChangePage(scope.row.id)"
                href="#"
                target="_blank"
                slot="reference"
                >{{ scope.row.title }}</a
              >
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="文章描述" prop="description" width="180" align="center">
        <template #default="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column label="浏览数" prop="description" align="center">
        <template #default="scope">
          {{ scope.row.scanNumber }}
        </template>
      </el-table-column>
      <el-table-column label="评论数" prop="description" align="center">
        <template #default="scope">
          {{ scope.row.commentNumber }}
        </template>
      </el-table-column>
      <el-table-column label="所属分类" prop="category" align="center">
        <template #default="scope">
          {{ scope.row.category?.name }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期" prop="date" align="center">
        <template #default="scope">
          {{ formDates(scope.row.createDate, true) }}
        </template>
      </el-table-column>
      <el-table-column label="编辑" align="center">
        <template #default="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            :open-delay="300"
            placement="top"
            :hide-after="500"
          >
            <el-button
              @click="handleEdit(scope.row)"
              type="primary"
              :icon="EditPen"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            :open-delay="300"
            placement="top"
            :hide-after="500"
          >
            <el-button
              type="danger"
              @click="handleDelete(scope.row.id)"
              :icon="Delete"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next, sizes,jumper"
        :total="blogRes.data.total"
        :page-size="pageQuery.limit"
        :pager-count="5"
        :current-page="pageQuery.page"
        :page-sizes="[5, 10, 15]"
        @current-change="ChangePage"
        @size-change="handleSizeChange"
        class="mt-4"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getBlog, BlogPageQuery, IBlogData, deleteBlog } from "@/api/blog";
import { reactive, onBeforeMount, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { formDates } from "@/utils/Date";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { FRONTS_URL } from "@/UrlControl";
import { useRouter } from "vue-router";

// 请求参数
const pageQuery = reactive<BlogPageQuery>({
  page: 1,
  limit: 5,
  keyword: "",
  categoryId: "",
});

const router = useRouter();

// 加载状态
const loading = ref(false);

interface IBlogList {
  data: IBlogData;
}

// 监听页码变化
watch(pageQuery, () => {
  fetchData();
});

// 跳转到编辑页面
function handleEdit(val: any) {
  router.push(`/blog/editblog/${val.id}`);
}

// 打开文章
function toChangePage(id: any) {
  window.open(`${FRONTS_URL}/article/${id}`);
}

// 修改页码
function ChangePage(page: number) {
  pageQuery.page = page;
}

// 修改每一页大小
function handleSizeChange(size: number) {
  pageQuery.limit = size;
  pageQuery.page = 1;
}

// 响应的数据
const blogRes = reactive<IBlogList>({
  data: {
    rows: [],
    blogTotal: 0,
    total: 0,
  },
});

// 异步数据请求
async function fetchData() {
  loading.value = true;
  const res = await getBlog({ ...pageQuery });
  loading.value = false;
  if (res.code === 0) {
    blogRes.data = res.data;
  } else {
    ElMessage({
      message: res.msg,
      type: "success",
    });
  }
}

// 删除文章
function handleDelete(id: string) {
  ElMessageBox.confirm("确认删除该文章吗?", "删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    loading.value = true;
    await deleteBlog(id);
    await fetchData();
    pageQuery.page = 1;
    loading.value = false;
    ElMessage({
      type: "success",
      message: "删除该文章成功",
    });
  });
}

onBeforeMount(() => {
  fetchData();
});
</script>

<style lang="less" scoped>
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
}
</style>
